<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<!-- <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image> -->
		<!-- 标题 -->
		<view class="t-b">
			<image class="login-bg" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/login_bg.gif" mode=""></image>
		</view>
		<view class="tit">扬尘污染防治监管平台</view>
		<u--form :model="loginForm" :rules="loginRules" ref="form1" class="cl">
			<u-form-item prop="username">
				<view class="t-a">
						<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
						<view class="line"></view>
						<input bindinput="userInput" type="text" name="username" placeholder="请输入账号" v-model="loginForm.username" />
				</view>
			</u-form-item>
			<u-form-item prop="password">
				<view class="t-a">
					<image src="https://zhoukaiwen.com/img/loginImg/yz.png"></image>
					<view class="line"></view>
					<input bindinput="psdInput" type="password" name="password" placeholder="请输入密码" v-model="loginForm.password" />
				</view>
			</u-form-item>
			<u-form-item>
				<view class="remember-psw">
					<checkbox-group @change="checkboxChange">
						<checkbox class="mycheck" id="chkRem" type="checkbox" :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#09CC86" />
						记住账号密码
					</checkbox-group>
				</view>
			</u-form-item>
			<u-form-item>
				<view class="login">
					<u-button shape="circle" type="primary" @click="onSubmit">登 录</u-button>
				</view>
			</u-form-item>
		</u--form>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import {
		getCaptcha
	} from '@/api/login'

	export default {
		data() {
			return {
				hasLogin: false,
				second: 60,
				showText: true,
				loginForm: {
					username: '',
					password: '',
					// username: 'hhzs',
					// password: '123456',
					code: '',
					isApp: '2',
					uuid: ''
				},
				rememberPsw: true,//复选框状态 默认勾选
				loginRules: {
					'username': {
						required: true,
						message: '必须输入账号',
						trigger: ['blur']
					},
					'password': {
						required: true,
						message: '必须输入密码',
						trigger: ['blur']
					},
					'code': {
						required: true,
						message: '必须填写验证码',
						trigger: ['blur']
					}
				},
				codeUrl: '',
				captchaEnabled: false
			}
		},
		mounted() {
			//记住密码
		//缓存的账号
		const HBusername = uni.getStorageSync('HBusername');
		//缓存的密码
		const HBpassword = uni.getStorageSync('HBpassword');
				//有缓存就赋值给文本没有就清空
			if (HBusername && HBpassword) {
				this.loginForm.username = HBusername;
				this.loginForm.password = HBpassword;
			} else {
				this.loginForm.username = '';
				this.loginForm.password = '';
			}
			
			this.getCode()
		},
		methods: {
			...mapActions(['Login', 'GetInfo']),
			//复选框
			checkboxChange: function(e) {
				if (e.detail.value.length == 1) {
					//获取缓存的账号 赋值
					uni.getStorageSync('HBusername',this.loginForm.username);
					uni.getStorageSync('HBpassword',this.loginForm.password);
				} else {//销毁
					uni.removeStorageSync('HBusername');
					uni.removeStorageSync('HBpassword');              
				}
			},
			onSubmit() {
				const app = this
				app.$refs.form1.validate().then(res => {
					app.hasLogin = true
					app.Login(app.loginForm).then(res => {
						if (res.data.code === 200) {
						   //勾选就缓存账号和密码
							if (this.rememberPsw) {
								uni.setStorageSync('HBusername', this.loginForm.username);
								uni.setStorageSync('HBpassword', this.loginForm.password);
							} else {//销毁缓存
								uni.removeStorageSync('HBusername');
								uni.removeStorageSync('HBpassword');
							}
							
							app.GetInfo().then(res => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							})
						} else {
							uni.showModal({
								title: res.data.msg,
								showCancel: false
							})
						}
					}).catch(error => {
						uni.showModal({
							title: error,
							showCancel: false
						})
					}).finally(() => {
						app.hasLogin = false
					})
				}).catch(errors => {
					console.log(errors)
					return false
				})
			},
			getCode() {
				getCaptcha().then(res => {
					this.codeUrl = "data:image/gif;base64," + res.data.img;
					this.loginForm.uuid = res.data.uuid
					this.captchaEnabled = res.data.captchaEnabled
				}).catch(error => {
					uni.$u.toast(error)
				})
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.form1.setRules(this.loginRules)
		}
	}
</script>

<style lang="scss">
	.tit {
		text-align: center;
		font-weight: bold;
		font-size: 36upx;
		margin: 10upx auto 40upx;
	}
	
	.remember-psw {
		display: flex;
		justify-content: flex-end;
		
		//自定义checkbox的样式（ 元素使用的时候就是使用类名：mycheck）
		checkbox.mycheck .wx-checkbox-input,
		checkbox.mycheck .uni-checkbox-input {
			width: 30rpx !important;
			height: 30rpx !important;
			background-color: #eeeeee !important;
			border-radius: 5px !important;
			border: solid 1px #cccccc !important;
		}
		
		// 选中后的 对勾样式 
		checkbox.mycheck .uni-checkbox-input-checked::before,
		checkbox.mycheck .wx-checkbox-input-checked::before{
			// width: 25rpx !important; // 选中后对勾大小，不要超过背景的尺寸 
			// height: 25rpx !important; // 选中后对勾大小，不要超过背景的尺寸 
			font-size: 36rpx !important; // 对勾大小 30rpx /
		}
	}
		
.img-a {
	position: absolute;
	width: 100%;
	top: -150upx;
	right: 0;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50upx;
	/* margin-bottom: -200upx; */
}
.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28upx;
	color: #000;
}
.login {
	width: 60%;
	margin: 0 auto;
}

.t-login button {
	font-size: 28upx;
	background: #5677fc;
	color: #fff;
	height: 90upx;
	border-radius: 50upx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	margin-top: 20upx;
}

.t-login input {
	padding: 0 20upx 0 120upx;
	height: 90upx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28upx;
	border-radius: 50upx;
}

.t-login .t-a {
	position: relative;
}

.t-login .t-a image {
	width: 40upx;
	height: 40upx;
	position: absolute;
	left: 40upx;
	top: 28upx;
	/* border-right: 2upx solid #dedede; */
	margin-right: 20upx;
}
.t-login .t-a .line{
	width: 2upx;
	height: 40upx;
	background-color: #dedede;
	position: absolute;
	top: 28upx;
	left: 98upx;
}

.t-login .t-b {
	text-align: left;
	font-size: 46upx;
	color: #000;
	padding: 90upx 0 30upx 0;
	font-weight: bold;
	.login-bg {
		position: relative;
		display: block;
		width: 350rpx;
		height: 350rpx;
		margin: 0 auto;
		z-index: 2;
	}
}
.t-login .t-b2 {
	text-align: left;
	font-size: 32upx;
	color: #aaaaaa;
	padding: 0upx 0 120upx 0;
}

.t-login .t-c {
	position: absolute;
	right: 22upx;
	top: 22upx;
	background: #5677fc;
	color: #fff;
	font-size: 24upx;
	border-radius: 50upx;
	height: 50upx;
	line-height: 50upx;
	padding: 0 25upx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80upx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250upx;
	margin: 80upx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50upx;
	height: 50upx;
}

.t-login .t-f {
	text-align: center;
	margin: 200upx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20upx;
	color: #aaaaaa;
	font-size: 27upx;
}

.t-login .uni-input-placeholder {
	color: #000;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
</style>
